<template>
  <el-dialog
  :title="title" v-if="show" :visible.sync="show" @close="close">
    <div class="wp-show-header">仓库：<el-tag>{{warehouseName}}</el-tag> 产品：<el-tag>{{productName}}</el-tag></div>
      <el-table :data="list" >
        <el-table-column label="订单号" prop="associateOrder">
          <template slot-scope="scope">
            <el-link @click.native="salesDetail(scope.row.associateOrder)" type="primary">{{scope.row.associateOrder}}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="锁定数量" align="center" prop="lockedNum"></el-table-column>
      </el-table>
      <Sale-order-detail-panel
            v-if="showSalesOrderDetail"
            sourceType="productStock"
      :show.sync="showSalesOrderDetail"
      :data.sync="salesDetailData"
      />
  </el-dialog>
</template>
<script>
import SaleOrderDetailPanel from '@/views/eims/sales/order/components/DetailPanel'
import Mixins from '../mixins'
export default {
  props: {
    visible: Boolean,
    warehouseName: String,
    warehouseCode: {type: String},
    productCode: {type: String},
    productName: String
  },
  components: {SaleOrderDetailPanel},
  mixins: [Mixins],
  data () {
    return {
      title: '产品锁库订单',
      list: [],
      show: this.visible,
      showSalesOrderDetail: false,
      salesDetailData: {}
    }
  },
  created () {
    this.getProductStockLocked()
  },
  watch: {
    show (nVal) {
      this.$emit('update:visible', nVal)
    }
  },
  methods: {
    close () {
      this.show = false
    },
    salesDetail (associateOrder) {
      this.salesDetailData.orderNo = associateOrder
      this.showSalesOrderDetail = true
    },
    getProductStockLocked () {
      if (this.warehouseCode && this.productCode) {
        const params = {warehouseCode: this.warehouseCode, productCode: this.productCode}
        this.requestOption('getProductStockLocked', params, res => {
          this.list = res.data || []
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wp-show-header{
  font-weight: 700;
}
</style>
